<template>
  <section id="newsTraining">
    <section class="sec-box min-h-screen flex-cc news-event">
      <div class="news-event-swiper-container">
        <h2 class="margin-bottom-middle">Training</h2>
        <Swiper :slidesPerView="'auto'" :spaceBetween="30">
          <SwiperSlide v-for="(item, index) in list" :key="index">
            <dl class="new-event-dl" @click.stop="doDetail(item)">
              <dt>
                <img v-if="item.imageUrl" width="100%" :src="item.imageUrl" />
              </dt>
              <dd class="margin-top margin-bottom">
                <h3>{{ item.title || '' }}</h3>
              </dd>
              <dd>{{ item.alt || '' }}</dd>
            </dl>
          </SwiperSlide>
        </Swiper>
      </div>
    </section>
  </section>
</template>
<script>
import HttpServer from '@/utils/http'
import { newsManageAPI } from '@/config/api'
import { NewsCategory, NewsUrlCategory } from '@/constants/news'

import { Swiper, SwiperSlide } from 'swiper/vue'
import imgDefault from '@images/logo.png'

export default {
  name: 'cmpts-news-training',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      imgDefault,
      NewsCategory,
      NewsUrlCategory,
      list: [],
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    async queryData() {
      const { code, data } = await HttpServer.get(newsManageAPI.getList, {
        current: 1,
        size: 10,
        title: '',
        category: NewsCategory.Train.value,
      })
      if (code == 200) {
        this.list = data.records
      }
    },
    doDetail(item) {
      if (item.urlType == NewsUrlCategory.self.value) {
        this.$router.push({
          path: `/news/${item.id}`,
        })
      } else {
        if (item.url) window.open(item.url)
      }
    },
  },
}
</script>
<style lang="less" scoped>
</style>
